<template>
  <div class="main">
    <!-- 顶部标题区域 -->
    <div class="header" v-if="activeIndex!= 5">
      <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2-web_1681200137365.png">
    </div>

    <!-- 导航区域 -->
    <div class="nav" v-if="activeIndex!= 5">
      <a class="nav-item" :class="{active: activeIndex == 1}" @click="handleClick(1)">
        <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E4%B8%8E%E5%81%A5%E5%BA%B7%E8%AF%BE%E7%A8%8B_1667185159861.png" alt="体育与健康课程">
        <div class="channel-icon-title">体育与健康课程</div>
      </a>
      <a class="nav-item" :class="{active: activeIndex == 2}" @click="handleClick(2)">
        <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E8%BF%90%E5%8A%A8%E6%8A%80%E8%83%BD_1667185168589.png" alt="运动技能">
        <div class="channel-icon-title">运动技能</div>
      </a>
      <a class="nav-item" :class="{active: activeIndex == 3}" @click="handleClick(3)">
        <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E6%B4%BB%E5%8A%A8_1667185176647.png" alt="体育活动">
        <div class="channel-icon-title">体育活动</div>
      </a>
      <a class="nav-item" :class="{active: activeIndex == 4}" @click="handleClick(4)">
        <img src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E5%81%A5%E5%BA%B7%E6%9C%8D%E5%8A%A1_1667185184559.png" alt="健康服务">
        <div class="channel-icon-title">健康服务</div>
      </a>
    </div>

    <!--下面内容区域 -->
    <div v-if="activeIndex == 0">
      <div class="section">
        <div class="section-header">
          <img class="index-module_title-icon_5Wnj8" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E4%B8%8E%E5%81%A5%E5%BA%B7%E8%AF%BE%E7%A8%8B_1667185159861.png">
          <h2 class="section-title">体育与健康课程</h2>
          <a  class="more-link" @click="handleClick(1)">更多 &gt;</a>
        </div>
        <div class="section-body">
          <a class="section-left" @click="handleClick(1)" style="cursor: pointer;">
            <img class="index-module_image_Qj8s+" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E4%B8%8E%E5%81%A5%E5%BA%B7%E8%AF%BE%E7%A8%8B%E6%A9%B1%E7%AA%97%E5%B9%BF%E5%91%8A%E5%A4%A7%E5%9B%BE_1692244469970.png?x-eos-process=image/format,webp/resize,m_lfit,w_600">
          </a>

          <div class="section-right">
            <a class="section-item" v-for="(item,index) in healthList" :key="index" @click="jumpPlayer(item.id)">
              <img :src="item.image" alt="课程1" class="item-img" />
              <div class="item">
                <h3 class="item-title">
                  <span >{{item.title}}</span>
                </h3>
                <div class="item-text">{{item.description}}</div>
              </div>
            </a>

          </div>
        </div>
      </div>


      <div class="section">
        <div class="section-header">
          <img class="index-module_title-icon_5Wnj8" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E8%BF%90%E5%8A%A8%E6%8A%80%E8%83%BD%E6%9D%BF%E5%9D%97%E5%9B%BE%E6%A0%87_1692250371499.png">
          <h2 class="section-title">运动技能</h2>
          <a  class="more-link" @click="handleClick(2)">更多 &gt;</a>
        </div>
        <div class="section-body">
          <a class="section-left" @click="handleClick(2)" style="cursor: pointer;">
            <img class="index-module_image_Qj8s+" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E8%BF%90%E5%8A%A8%E6%8A%80%E8%83%BD%E6%A9%B1%E7%AA%97%E5%B9%BF%E5%91%8A%E5%A4%A7%E5%9B%BE_1692250379505.png">
          </a>

          <div class="section-right">
            <a class="section-item" v-for="(item,index) in sportsList" :key="index" @click="jumpPlayer(item.id)">
              <img :src="item.image" alt="课程1" class="item-img" />
              <div class="item">
                <h3 class="item-title">
                  <span >{{item.title}}</span>
                </h3>
                <div class="item-text">{{item.description}}</div>
              </div>
            </a>

          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <img class="index-module_image_Qj8s+" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E6%B4%BB%E5%8A%A8%E6%9D%BF%E5%9D%97%E5%9B%BE%E6%A0%87_1692250505326.png">
          <h2 class="section-title">体育活动</h2>
          <a  class="more-link" @click="handleClick(3)">更多 &gt;</a>
        </div>
        <div class="section-body">
          <a class="section-left" @click="handleClick(3)" style="cursor: pointer;">
            <img class="index-module_image_Qj8s+" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E4%BD%93%E8%82%B2%E6%B4%BB%E5%8A%A8%E6%A9%B1%E7%AA%97%E5%B9%BF%E5%91%8A%E5%A4%A7%E5%9B%BE_1692250512943.png">
          </a>

          <div class="section-right">
            <a class="section-item" v-for="(item,index) in educationList" :key="index" @click="jumpPlayer(item.id)">
              <img :src="item.image" alt="课程1" class="item-img" />
              <div class="item">
                <h3 class="item-title">
                  <span >{{item.title}}</span>
                </h3>
                <div class="item-text">{{item.description}}</div>
              </div>
            </a>

          </div>
        </div>
      </div>

      <div class="section">
        <div class="section-header">
          <img class="index-module_title-icon_5Wnj8" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E5%81%A5%E5%BA%B7%E6%9C%8D%E5%8A%A1%E6%9D%BF%E5%9D%97%E5%9B%BE%E6%A0%87_1692250599401.png">
          <h2 class="section-title">健康服务</h2>
          <a  class="more-link" @click="handleClick(4)">更多 &gt;</a>
        </div>
        <div class="section-body">
          <a class="section-left" @click="handleClick(4)" style="cursor: pointer;">
            <img class="index-module_image_Qj8s+" src="https://s-file-2.ykt.cbern.com.cn/auxo_channel_api/%E5%81%A5%E5%BA%B7%E6%9C%8D%E5%8A%A1%E6%A9%B1%E7%AA%97%E5%B9%BF%E5%91%8A%E5%A4%A7%E5%9B%BE_1692250607657.png">
          </a>

          <div class="section-right">
            <a class="section-item" v-for="(item,index) in fitnessList" :key="index" @click="jumpPlayer(item.id)">
              <img :src="item.image" alt="课程1" class="item-img" />
              <div class="item">
                <h3 class="item-title">
                  <span >{{item.title}}</span>
                </h3>
                <div class="item-text">{{item.description}}</div>
              </div>
            </a>

          </div>
        </div>
      </div>
    </div>

    <!--签栏内部内容-->
    <div class="card-container" v-if="activeIndex == 1">
      <div class="card" v-for="(item, index) in books_first" :key="index" @click="jumpPlayer(item.id)">
        <img :src="item.image" :alt="item.title" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-subtitle">{{ item.source }}</p>
        </div>
      </div>
    </div>

    <div class="card-container" v-if="activeIndex == 2">
      <div class="card" v-for="(item, index) in books_second" :key="index" @click="jumpPlayer(item.id)">
        <img :src="item.image" :alt="item.title" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-subtitle">{{ item.source }}</p>
        </div>
      </div>
    </div>

    <div class="card-container" v-if="activeIndex == 3">
      <div class="card" v-for="(item, index) in books_third" :key="index" @click="jumpPlayer(item.id)">
        <img :src="item.image" :alt="item.title" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-subtitle">{{ item.source }}</p>
        </div>
      </div>
    </div>

    <div class="card-container" v-if="activeIndex == 4">
      <div class="card" v-for="(item, index) in books_four" :key="index">
        <img :src="item.image" :alt="item.title" class="card-image" />
        <div class="card-content">
          <h3 class="card-title">{{ item.title }}</h3>
          <p class="card-subtitle">{{ item.source }}</p>
        </div>
      </div>
    </div>

  </div>

  <player v-if="activeIndex==5" :show-nav-bar="false" resource-type="video" :resource-id="resourceId"></player>
</template>

<script>
import Player from "@/views/resource/Player.vue";

export default {
  components: {Player},
  data() {
    return {
      //控制标签的显示
      activeIndex: 0,
      // 体育与健康标签内容
      books_first: [
        { id:270, image: "https://via.placeholder.com/500x300", title: "奥林匹克运动会", source: "智慧中小学" },
        { id:271, image: "https://via.placeholder.com/500x300", title: "背要常暖，胸要常护", source: "智慧中小学" },
        { id:272, image: "https://via.placeholder.com/500x300", title: "健美操基本步伐", source: "智慧中小学" },
        { id:273, image: "https://via.placeholder.com/500x300", title: "健美操基本步法", source: "智慧中小学" },
        { id:274, image: "https://via.placeholder.com/500x300", title: "体育活动中的自我保护和相互保护", source: "智慧中小学" },
        { id:275, image: "https://via.placeholder.com/500x300", title: "武术基本步型", source: "智慧中小学" },
        { id:276, image: "https://via.placeholder.com/500x300", title: "武术基本动作", source: "智慧中小学" },
        { id:277, image: "https://via.placeholder.com/500x300", title: "武术基本手法", source: "智慧中小学" },
        { id:278, image: "https://via.placeholder.com/500x300", title: "怎样正确使用空调", source: "智慧中小学" },
        { id:279, image: "https://via.placeholder.com/500x300", title: "中暑的识别和预防", source: "智慧中小学" },
      ],
      // 运动技能标签内容
      books_second: [
        { id:200, image: "https://via.placeholder.com/500x300", title: "体能训练：灵敏、协调——敏捷梯（2）", source: "智慧中小学" },
        { id:201, image: "https://via.placeholder.com/500x300", title: "体能训练：灵敏、协调——敏捷梯（3）", source: "智慧中小学" },
        { id:202, image: "https://via.placeholder.com/500x300", title: "体能训练：灵敏、协调——敏捷梯（4）", source: "智慧中小学" },
        { id:203, image: "https://via.placeholder.com/500x300", title: "体能训练：灵敏、协调——敏捷梯（5）", source: "智慧中小学" },
        { id:204, image: "https://via.placeholder.com/500x300", title: "体能训练：灵敏、协调——敏捷梯（6）", source: "智慧中小学" },
        { id:255, image: "https://via.placeholder.com/500x300", title: "体能训练：灵敏、协调——敏捷梯", source: "智慧中小学" },
      ],
      // 体育活动标签内容
      books_third: [
        { id:196, image: "https://via.placeholder.com/500x300", title: "男子超级联赛", source: "智慧中小学" },
        { id:197, image: "https://via.placeholder.com/500x300", title: "男子乙级联赛", source: "智慧中小学" },
        { id:198, image: "https://via.placeholder.com/500x300", title: "女子超级联赛", source: "智慧中小学" },
        { id:199, image: "https://via.placeholder.com/500x300", title: "女子甲级联赛", source: "智慧中小学" }
      ],
      // 健康服务标签内容
      books_four: [
        { id:191, image: "https://via.placeholder.com/500x300", title: "体育概论", source: "智慧中小学" },
        { id:192, image: "https://via.placeholder.com/500x300", title: "体育概念", source: "智慧中小学" },
        { id:193, image: "https://via.placeholder.com/500x300", title: "体育功能", source: "智慧中小学" },
        { id:194, image: "https://via.placeholder.com/500x300", title: "体育过程", source: "智慧中小学" },
        { id:195, image: "https://via.placeholder.com/500x300", title: "体育目的", source: "智慧中小学" },
      ],
      // 体育与健康
      healthList: [
        { id:271,image: "https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/1_1689384279339.png", title: "奥林匹克运动会",description: "奥林匹克运动会"},
        { id:272,image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E5%88%9D%E4%B8%AD%E5%85%AB%E5%B9%B4%E7%BA%A7%E4%BD%93%E8%82%B2%E4%B8%8E%E5%81%A5%E5%BA%B7_1667204510563.png", title: "背要常暖，胸要常护",description: "背要常暖，胸要常护"},
        { id:273,image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E9%AB%98%E4%B8%AD%E4%BD%93%E8%82%B2%E4%B8%8E%E5%81%A5%E5%BA%B7%E5%BF%85%E4%BF%AE%E4%B8%8A_1667204541767.png", title: "健美操基本步伐",description: "健美操基本步伐"}
      ],
      // 运动技能
      sportsList: [
        { id:200,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/%E5%A4%A9%E5%A4%A9%E8%B6%B3%E7%90%83_1667204350486.png", title: "体能训练：灵敏、协调——敏捷梯（2）",description: "体能训练：灵敏、协调——敏捷梯（2）"},
        { id:201,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/%E4%B9%92%E4%B9%93%E7%90%83_1667204421253.png", title: "体能训练：灵敏、协调——敏捷梯（3）",description: "体能训练：灵敏、协调——敏捷梯（3）"},
        { id:202,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/%E7%AF%AE%E7%90%83%E8%BF%90%E5%8A%A8-%E5%8D%95%E6%89%8B%E8%82%A9%E4%B8%8A%E6%8A%95%E7%AF%AE%E6%8A%80%E6%9C%AF_1667204444375.png", title: "体能训练：灵敏、协调——敏捷梯（4）",description: "体能训练：灵敏、协调——敏捷梯（4）"}
      ],
      // 体育活动
      educationList: [
        { id:196,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/2021%E5%B9%B4%E5%85%A8%E5%9B%BD%E9%9D%92%E5%B0%91%E5%B9%B4%E6%A0%A1%E5%9B%AD%E8%B6%B3%E7%90%83%E8%81%94%E8%B5%9B_1667204276759.png", title: "男子超级联赛",description: "男子超级联赛"},
        { id:197,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/2019%E4%B8%AD%E5%9B%BD%E5%88%9D%E9%AB%98%E4%B8%AD%E7%AF%AE%E7%90%83%E8%81%94%E8%B5%9B%E6%80%BB%E5%86%B3%E8%B5%9B_1667204297625.png", title: "男子乙级联赛",description: "男子乙级联赛"},
        { id:198,image: "https://s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/2019%E5%B9%B4%E7%AC%AC%E5%8D%81%E5%85%AD%E5%B1%8A%E4%B8%AD%E5%9B%BD%E4%B8%AD%E5%AD%A6%E7%94%9F%E6%8E%92%E7%90%83%E8%81%94%E8%B5%9B_1667204316758.png", title: "女子超级联赛",description: ""}
      ],
      // 健康服务
      fitnessList: [
        { id:191,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/%E5%B0%8F%E7%BB%86%E8%8A%82%EF%BC%8C%E5%A4%A7%E5%81%A5%E5%BA%B7-%E6%A0%B8%E9%85%B8%E6%A3%80%E6%B5%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9_1667204168736.png", title: "体育概论",description: "体育概论"},
        { id:192,image: "https://s-file-2.ykt.cbern.com.cn/zxx/X-COURSE/416/%E8%BF%90%E5%8A%A8%E6%80%A5%E6%95%91%E5%AD%A6_1667204194673.png", title: "体育概念",description: "体育概念"},
        { id:193,image: "https://pretest-s-file-1.ykt.cbern.com.cn/zxx/X-COURSE/416/%E2%80%9C%E5%BF%83%E7%90%86%E5%81%A5%E5%BA%B7%E2%80%9D%E4%B8%93%E9%A2%98_1667204238534.png", title: "“体育功能",description: "体育功能"}
      ],
      // 视频对应的id,用于控制播放视频组件的内容
      resourceId:1,

    };
  },
  methods: {
    // 点击跳转不同标签
    handleClick(index) {
      this.activeIndex = index;
    },
    // 跳转视频页面并显示对应的视频
    jumpPlayer(resourceId) {
      this.activeIndex = 5;
      this.resourceId = resourceId;
    }

  },
  mounted() {
    this.activeIndex = 0;
  }
};
</script>

<style scoped>
.main{
  width: calc(100% - 48px);
  margin: 0 auto;
}
/* 顶部样式 */
.header {
  text-align: center;
  width: 100%;
  border-radius: 8px;
  margin: auto;
}
.header img{
  width: 100%;
}

.nav {
  margin: 10px 1px 0 1px;
  background: #f5f7fa;
  border: 1px solid #fff;
  display: flex;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  position: relative;
  z-index: 1;

}
.nav-item {
  transition: .3s;
  flex: 1;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #333;
  padding: 16px 12px;
  cursor: pointer;
}

.active {
  background: #fff;
}

/* Section 样式 */
.section-item {
  border-radius: 10px;
}
.section-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0 18px 36px;
}
.section-title {
  flex: 1;
  margin: 0;
  line-height: 32px;
  font-size: 24px;
  color: #333;
  padding-left: 10px;
}
.more-link {
  color: #007bff;
  text-decoration: none;
  font-size: 1rem;
  cursor: pointer;
}

.section-body {
  position: relative;
  padding: 30px;
  border-radius: 10px;
  background-color: #fff;
  z-index: 10;
  display: flex;
  flex-direction: row;
}
.section-left {
  width: 50%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px 0 hsla(0, 0%, 60%, .1);
}

.section-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.section-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.section-right {
  width: 50%;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.section-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 30%;
  width: 100%;
  cursor: pointer;
}
.item-img {
  min-width: 180px;
  max-width: 180px;
  border-radius: 8px;
  overflow: hidden;
}
.item{
  padding-left: 16px;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.item-title {
  margin-bottom: 14px;
  color: #333;
  font-size: 16px;
  font-weight: 700;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.item-text {
  font-size: 14px;
  color: #666;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
}
.card-container{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 16px;
}
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 140px;
  object-fit: cover;
}

.card-content {
  padding: 8px 16px;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.card-subtitle {
  font-size: 14px;
  color: #888;
  margin: 4px 0 0;
}
</style>
